<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
 <script>
 function showCourseTbl(){
	 document.getElementById("tbl-trainee").style="display:none";
	 document.getElementById("tbl-course").style="display:absolute";
 }
 function showTraineeTbl(){
	 document.getElementById("tbl-trainee").style="display:absolute";
	 document.getElementById("tbl-course").style="display:none";
	 
 }
 
 function showPhaseTbl(idx,total){
	 for(var i=1;i<=total;i++){
		 if(i==idx){
		 	document.getElementById("tbl-phase-"+i).style="display:absolute";
		 }else{
			document.getElementById("tbl-phase-"+i).style="display:none";
		 }
	 }
 }
 </script>   
</head>

<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>
  <%@ include file="/WEB-INF/include/submenu.jsp"%>

  <div class="container-fluid umu-container has-umu-sidemenu">
    <div class="umu-breadcrumb">
      <div class="breadcrumb">培训项目详细信息</div>
    </div>
    <div class="panel-default beast-panel beast-panel-layout">

      <div class="panel-body">

        <div class="col-xs-12 beast-panel-layout-right">

    		<div class="ms-content-layout">
		<div class="form-horizontal ms-form form-personal-info">

          <div class="form-group ms-form-group">
            <label class="control-label col-xs-2" style="width: 12%;">编号：</label>
            <div class="col-xs-2">
              <p class="form-control-static">001</p>
            </div>
            <label class="control-label col-xs-2" style="width: 12%;" >分类：</label>
            <div class="col-xs-2">
              <p class="form-control-static">分类1-分类2</p>
            </div>
          </div>

          <div class="form-group ms-form-group">
            <label class="control-label col-xs-2" style="width: 12%;">项目名称：</label>
            <div class="col-xs-2">
              <p class="form-control-static">项目1</p>
            </div>
            <label class="control-label col-xs-2" style="width: 12%;" >总期数：</label>
            <div class="col-xs-2">
              <p class="form-control-static">3</p>
            </div>
          </div>
          <div class="form-group ms-form-group">
            <label class="control-label col-xs-2" style="width: 12%;">项目负责人：</label>
            <div class="col-xs-2">
              <p class="form-control-static">项目负责人1</p>
            </div>
            <label class="control-label col-xs-2" style="width: 12%;" >事业部：</label>
            <div class="col-xs-2">
              <p class="form-control-static">事业部1</p>
            </div>
          </div>
          <div class="form-group ms-form-group">
            <label class="control-label col-xs-2" style="width: 12%;">开始时间：</label>
            <div class="col-xs-2">
              <p class="form-control-static">2018-01-01</p>
            </div>
            <label class="control-label col-xs-2" style="width: 12%;" >结束时间：</label>
            <div class="col-xs-2">
              <p class="form-control-static">2018-02-01</p>
            </div>
          </div>

        </div>
        
 <div class="umu-main">
      <ul class="nav nav-pills umu-tabs">
        <li class="pull-left" id="tab-phase1"><a href="javascript:showPhaseTbl(1,3);">项目1期</a></li>
        <li class="pull-left" id="tab-phase2"><a href="javascript:showPhaseTbl(2,3);">项目2期</a></li>
        <li class="pull-left" id="tab-phase3"><a href="javascript:showPhaseTbl(3,3);">项目3期</a></li>
    </ul>
    <div id="tbl-phase-1">
    	<div class="form-group ms-form-group">
    		<div class=" pull-left breadcrumb">第1期课程：</div>
    			<div class=" pull-right">
					<a href="${ctx.host}/project-surveys/1/1" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#trainee" data-toggle="">填写问卷</a>&nbsp;&nbsp;
	          	</div>
	        </div>
            <table class="table table-hover umu-table tab-pane table-striped" >
		        <thead>
		          <tr>
					<th>课程名称</th>
					<th>课程性质</th>
					<th>讲师姓名</th>
					<th>课程时长</th>

		          </tr>
		        </thead>
		        
		        <tbody>
					<tr>
					<td>课程1</td>
					<td>课程性质1</td>
					<td>讲师1</td>
					<td>10</td>
					</tr>		        
					<tr>
					<td>课程2</td>
					<td>课程性质2</td>
					<td>讲师2</td>
					<td>10</td>
					</tr>		        
		        </tbody>
		        
		
		      </table>
		      </div>
		  <div id="tbl-phase-2">
	    	<div class="form-group ms-form-group">
	    		<div class=" pull-left breadcrumb">第2期课程：</div>
	    		<div class=" pull-right">
					<a href="${ctx.host}/project-surveys/1/1" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#trainee" data-toggle="">填写问卷</a>&nbsp;&nbsp;
		          </div>
		    </div>
            <table class="table table-hover umu-table tab-pane table-striped" >
		        <thead>
		          <tr>
					<th>课程名称</th>
					<th>课程性质</th>
					<th>讲师姓名</th>
					<th>课程时长</th>
					
		          </tr>
		        </thead>
		        
		        <tbody>
					<tr>
					<td>课程3</td>
					<td>课程性质3</td>
					<td>讲师3</td>
					<td>10</td>
					</tr>		        
					<tr>
					<td>课程4</td>
					<td>课程性质4</td>
					<td>讲师4</td>
					<td>10</td>
					</tr>		        
		        </tbody>
		        
		
		      </table>
		      </div>
		      
    		<div id="tbl-phase-3">
	    	<div class="form-group ms-form-group">
	    		<div class=" pull-left breadcrumb">第3期课程：</div>
	    		<div class=" pull-right">
					<a href="${ctx.host}/project-surveys/1/1" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#trainee" data-toggle="">填写问卷</a>&nbsp;&nbsp;
		        </div>
		    </div>
            <table class="table table-hover umu-table tab-pane table-striped" >
		        <thead>
		          <tr>
					<th>课程名称</th>
					<th>课程性质</th>
					<th>讲师姓名</th>
					<th>课程时长</th>
					
		          </tr>
		        </thead>
		        
		        <tbody>
					<tr>
					<td>课程5</td>
					<td>课程性质5</td>
					<td>讲师5</td>	
					<td>10</td>
					</tr>		        
					<tr>
					<td>课程6</td>
					<td>课程性质6</td>
					<td>讲师6</td>
					<td>10</td>
					</tr>		        
		        </tbody>
		        
		
		      </table>
		      </div>	
		      	<div class="ms-operation-group pull-right">
					<a href="${ctx.host}/project-surveys" data-toggle="" data-target="#search" class="btn btn-shadow-success btn-shadow umu-btn">
					  &nbsp;&nbsp;返回
					</a>
		        </div>
		      
		    </div>           
        </div>

      </div>

    </div>

  </div>
  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
</body>
<script>
showPhaseTbl(1,3);	
	//document.getElementById("tab-course").focus();
</script>

</html>